<template>
	<view
		@click="clickJingLingFn"
		:style="`
			position:absolute;
			z-index: 3;
			height:100%;
			width:100%;
			background:url('${props.jingLingInfo.imageUrl}') no-repeat center;
			background-size: contain;
			top: ${nowPosition.top}px;
			left: ${nowPosition.left}px;`">
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		watch
	} from 'vue';
	let nowPosition = reactive({
		top: 0,
		left: 0
	})
	let emit = defineEmits(["clickJingLing"])
	let shuxing = reactive({imageUrl:null})
	const props = defineProps({
		cubeWidth: {
			type: Number,
			default: 20
		},
		initPosition: {
			type: Array,
			default: [0, 0]
		},
		jingLingInfo: {
			type: Object
		}
	})
	onMounted(() => {
		loadingMap(props)
	})

	watch(props, (newValue, OldValue, onCleanup) => {
		loadingMap(newValue)
		onCleanup(() => {});
	})

	const loadingMap = (newValue) => {
		nowPosition.top = newValue.initPosition[0] * newValue.cubeWidth
		nowPosition.left = newValue.initPosition[1] * newValue.cubeWidth
		shuxing = newValue.jingLingInfo
	}
	const clickJingLingFn = () => {
		emit("clickJingLing", shuxing, {
			top: nowPosition.top / props.cubeWidth,
			left: nowPosition.left / props.cubeWidth
		})
	}
</script>

<style scoped>

</style>